<template>
  <div class="statement scrollbar-wrap">
    <div class="statement-head">
      <span>
        <header-select :is-statement="true" @selectProject="getProject" />
      </span>
      <span class="type-tab">
        <el-checkbox v-model="queryParams.haveOld" class="checkbox-have-old" true-label="1" false-label="0" label="旧工序" border size="small" @change="getProject(currentProject)" />
        <el-tag class="tab" type="info">报验比例</el-tag>
        <el-tag class="tab" type="success">验收比例</el-tag>
        <el-tag class="tab">合格率</el-tag>
        <el-tag class="tab" type="danger">合格率小于80%</el-tag>
      </span>
    </div>
    <el-scrollbar
      v-loading="loading"
      style="height: calc(100vh - 140px);"
      element-loading-text="拼命加载中..."
    >
      <div
        v-for="(item, indexT) in table"
        :key="indexT"
        :name="indexT"
        class="statement-table-wrap"
      >
        <el-table
          size="mini"
          :data="item.children"
          class="statement-table"
          cell-class-name="table-cell"
        >
          <el-table-column
            align="center"
            min-width="260"
          >
            <template slot="header">
              <el-tag size="small" type="danger">{{ item.name }}</el-tag>
            </template>
            <template slot-scope="scope">
              <el-popover
                placement="top-start"
                trigger="click"
              >
                <div class="ellipsis-all-content">{{ scope.row.name }}</div>
                <span slot="reference" class="ellipsis">{{ scope.row.name }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item1, index) in tableProps"
            :key="index"
            :label="item1.name"
            align="center"
            min-width="166"
          >
            <template slot-scope="scope">
              <div class="table-tab" @click="goBatch(item1)">
                <el-tag size="mini" class="tab" type="info">{{ scope.row.children[index].inspectionRate }}</el-tag>
                <el-tag size="mini" class="tab" type="success">{{ scope.row.children[index].checkRate }}</el-tag>
                <el-tag v-if="translateNum(scope.row.children[index].qualifiedRate)" size="mini" class="tab">{{ scope.row.children[index].qualifiedRate }}</el-tag>
                <el-tag v-else size="mini" class="tab" type="danger">{{ scope.row.children[index].qualifiedRate }}</el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { keyCheckTableMonitoring } from '@/api/statement/statement'
import HeaderSelect from './components/HeaderSelect'
export default {
  name: 'ProcessConstruct',
  components: {
    HeaderSelect
  },
  data() {
    return {
      queryParams: {
        fid: '',
        haveOld: 0
      },
      activeNames: [0],
      loading: true,
      tableProps: [
        { name: '暂无楼栋' }
      ],
      table: [
        { name: '分部分项' }
      ],
      currentProject: {}
    }
  },
  created() {
    // this.init()
  },
  methods: {
    goBatch(building) {
      console.log(building)
      this.$router.push({ path: '/statement/Batch', query: { buildingId: building.fid, haveOld: this.queryParams.haveOld }})
    },
    getProject(project) {
      if (!project) {
        this.loading = false
        return
      }
      this.currentProject = project
      this.queryParams.fid = project.id
      this.init()
    },
    translateNum(rate) {
      const num = parseInt(rate.replace('%', ''))
      return num >= 80
    },
    init() {
      this.loading = true
      this.tableProps = [{ name: '暂无楼栋' }]
      this.table = [{ name: '分部分项' }]
      keyCheckTableMonitoring(this.queryParams).then(
        (response) => {
          if (response.code === 200) {
            this.table = response.data.tableData
            this.tableProps = response.data.floorHeader
          }
        }
      ).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 200)
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .statement {
    .statement-head {
      margin: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .type-tab {
        .tab {
          margin-left: 10px;
        }
      }
    }
    .statement-table-wrap {
      display: block;
      padding:0 20px 20px 20px;
      .statement-table {
        border: 1px solid #dfe6ec;
        border-bottom: none;
      }
      .table-tab {
        cursor: pointer;
        white-space: nowrap;
        .tab {
          margin-left: 6px;
        }
      }
    }
  }
</style>
<style lang="scss">
  .table-cell:hover {
    background-color: #d9ecff !important;
  }
  .checkbox-have-old{
    margin-left: 10px;
    display: inline;
  }
</style>
